<template>
  <div class='not-single' id='not-app-article'>
    <div class='photo-container'>
      <template v-for='item of photos'>
        <div class='photo-wrap'>
          <img
            class='photo'
            :src='item.photoSrc'
            data-fancybox='gallery'
            data-slug="cover"
            :data-caption='item.photoName'
            :href='item.photoSrc'
            :alt='item.photoName'/>
          <div class='photo-wrap-title'>
            <h6>{{ item.photoName }}</h6>
            <div class='photo-wrap-desc' v-if='item.photoDesc'>
              {{ item.photoDesc }}
            </div>
          </div>
        </div>
      </template>
    </div>
    <Paginator
      :pageSize='pagination.size'
      :pageTotal='pagination.total'
      :page='pagination.current'
      @pageChange='pageChangeHanlder' />
  </div>
</template>
<script lang='ts'>
import { computed, defineComponent, reactive, toRefs, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { useCommonStore } from '@/stores/common'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
import Breadcrumb from '@/components/Breadcrumb.vue'
import api from '@/api/api'
import ObSkeleton from '@/components/LoadingSkeleton/src/Skeleton.vue'
import Paginator from '@/components/Paginator.vue'

export default defineComponent({
  name: 'Photos',
  components: { Paginator, ObSkeleton, Breadcrumb },
  setup() {
    const { t } = useI18n()
    const route = useRoute()
    const commonStore = useCommonStore()
    const reactiveData = reactive({
      photoAlbumName: '' as any,
      noResult: false,
      photos: [] as any,
      albumId: route.params.albumId
    })
    const pagination = reactive({
      size: 12,
      total: 0,
      current: 1
    })
    onMounted(() => {
      loadDataFromServer()
    })
    onBeforeRouteUpdate((to) => {
      reactiveData.photoAlbumName = ''
      reactiveData.photos = []
      reactiveData.noResult = false
      pagination.current = 1
      reactiveData.albumId = to.params.albumId
      loadDataFromServer()
    })
    const loadDataFromServer = () => {
      let params = {
        current: pagination.current,
        size: pagination.size
      }
      api.getPhotosBuAlbumId(reactiveData.albumId, params).then(({ data }) => {
        pagination.total = data.data.count
        if (data.data.photos.length > 0) {
          reactiveData.photoAlbumName = data.data.photoAlbumName
          reactiveData.photos.push(...data.data.photos)
        } else {
          reactiveData.noResult = true
        }
      })
    }
    const toPageTop = () => {
      reactiveData.photos = []
      window.scrollTo({
        top: 0
      })
    }
    const pageChangeHanlder = (current: number) => {
      toPageTop()
      pagination.current = current
      loadDataFromServer()
    }
    return {
      ...toRefs(reactiveData),
      loadDataFromServer,
      isMobile: computed(() => commonStore.isMobile),
      t,
      pagination,
      pageChangeHanlder
    }
  }
})
</script>
